<!-- MAIN CONTENT -->
<div id="content">
    <div smart-include="sensor/views/sub-header.tpl.html"></div>
    <div class="clearfix margin-bottom-10">
        <div class="pull-left margin-right-20">
            <a class="btn btn-labeled btn-primary" data-toggle="modal" data-target="#addModal" ng-click="show_addbox()"> <span class="btn-label"><i class="glyphicon glyphicon-plus"></i></span>添加设备</a>
        </div>
        <div class="pull-right">
            <button type="button" class="btn btn-default" ng-click="change_layout()">
                <!-- <i class="fa fa-refresh"></i> -->
                切换
            </button>
        </div>
    </div>
    <!-- 表格布局 -->
    <div ng-show="table_show">
    <div id="exportable" class="table-responsive">
        <table class="table table-bordered table-hover no-margin font-sml table-striped sensor_table">
            <thead>
            <tr>
                <th>操作</th>
                <th>客户名称</th>
                <th>设备名称</th>
                <th>设备号</th>
                <th>设备类型</th>
                <th>绑定项目</th>
                <th>端口号</th>
                <th>所属区域</th>
                <th>地理位置</th>
                <th>参数设置</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in datas">
                <td>
                    <button class='btn btn-xs btn-default' uib-tooltip='编辑' tooltip-append-to-body='true' ng-click="showEditDevice(item)"  ng-disabled="observer"><i class='fa fa-pencil'></i></button>
                    <button class='btn btn-xs btn-default' uib-tooltip='删除' tooltip-append-to-body='true' ng-click="showDelDialog(item.id)" ng-disabled="observer"><i class='fa fa-times'></i></button>
                    <!--<button class='btn btn-xs btn-default' uib-tooltip='查看' tooltip-append-to-body='true' ng-click="datacharts(item)" ng-disabled="observer"><i class='fa fa-eye'></i></button>-->
                </td>
                <td>{{item.clientname}}</td>
                <td>{{item.devicename}}</td>
                <td>{{item.deviceid}}</td>
                <td>
                    {{item.typename}}
                </td>
                <td ng-switch="{{item.projectid}}">
                    <span ng-switch-when="0">
                        无
                    </span>
                    <span ng-switch-when="-1">
                                无
                            </span>
                    <span ng-switch-default>
                        {{item.proname}}
                    </span>
                </td>
                <td>{{item.port}}</td>
                <td>{{item.zone}}</td>
                <td>{{item.pos}}</td>
                <td>
                    <button class='btn btn-xs btn-default' uib-tooltip='设置' tooltip-append-to-body='true' ng-click="showSetDialog(item)" ng-disabled="observer"><i class='fa fa-send '>设置</i></button>
                    <button class='btn btn-xs btn-default' uib-tooltip='控制' tooltip-append-to-body='true' ng-click="showControlDialog(item)"><i class='fa fa-send '>控制</i></button>
                    <button class='btn btn-xs btn-default' uib-tooltip='查询' tooltip-append-to-body='true' ng-click="showQueryDialog(item.deviceid,item.port)"><i class='fa fa-send '>查询</i></button>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
    <div class="dt-toolbar-footer">
        <tm-pagination conf="paginationConf"></tm-pagination>
    </div>
    </div>
    <!-- 表格布局end -->
    <!-- 模块布局 -->
<div ng-hide="table_show">        
    <div class="row devlist">
        <div class="col-sm-10">
            <div class="well padding-10 padding-top-0">
                <div class="row alldev">
                    <div class="col-md-4 cell" ng-repeat="dev in datas">
                        <div class="dev_top">
                            <a ng-href="javascript:void(0);">{{dev.typename}}</a>
                            <a ng-href="javascript:void(0);">{{dev.deviceid}}</a>
                            <i class="glyphicon glyphicon-chevron-right"></i>
                            <span>{{dev.proname}}</span>
                            <span class="pull-right status {{dev.class_status}}">{{dev.statusname}}</span>
                        </div>
                        <div class="dev_middle">
                            <div class="dev_middle_left" ng-click="showEditDevice(dev)" style="cursor: pointer;">
                                <img src="styles/img/project/havepic.jpg" class="img-responsive dev_img" alt="styles/img">

                            </div>
                            <div class="dev_middle_right padding-left-10">
                                <p>
                                    <span class="span1">设备名称：</span> <span>{{dev.devicename}}</span>
                                </p>
                                <p>
                                    <span class="span1">客户名称：</span> <span>{{dev.clientname}}</span>
                                </p>
                                <p>
                                    <span class="span1">端口：</span> <span>{{dev.port}}</span>
                                </p>
                                <p>
                                    <span class="span1">位置：</span> <span>{{dev.pos}}</span>
                                </p>
                            </div>
                        </div>
                        <div class="dev_bottom">
                            <div class="spans">
                                <span ng-click="showSetDialog(dev)">设置</span>
                                <span ng-click="showControlDialog(dev)">控制</span>
                                <span ng-click="showQueryDialog(dev.deviceid,dev.port)">查询</span>
                                <span ng-click="showDelDialog(dev.id)">删除</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dev_jiazai">
                    <a ng-click="jiazai_more()">
                        <span>加载更多...</span>
                    </a>
                </div>
            </div>

        </div>
        <div class="col-sm-2" id="list_right">
            <div class="well padding-10">
                <h5 class="margin-top-0"><i class="fa fa-search"></i> 设备搜索...</h5>
                <div class="input-group">
                    <input type="text" class="form-control" ng-model="paginationConf.deviceid">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="select()">
                            <i class="fa fa-search"></i>
                        </button>
                    </span>
                </div>
                <!-- /input-group -->
            </div>
            <!-- /well -->
            <div class="well padding-10">
                <h5 class="margin-top-0"><i class="fa fa-tags"></i> 项目:</h5>
                <div class="row">
                    <div class="col-lg-12">
                        <ul class="list-unstyled">
                            <li class="dev_types_one">
                                <span class=" prospan prospan0" ng-click="select_pro(0)">
                                    未绑定
                                </span>
                            </li>
                            <li ng-repeat="pro in projects" class="dev_types_one">
                                <span class="prospan prospan{{pro.id}}" ng-click="select_pro(pro.id)">
                                    {{pro.name}}
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /well -->
            <!-- /well -->
            <div class="well padding-10">
                <h5 class="margin-top-0"><i class="fa fa-tags"></i> 设备类型:</h5>
                <div class="row">
                    <div class="col-lg-12">
                        <ul class="list-unstyled">
                            <li ng-repeat="type in types" class="dev_types_one">
                                <span class="typespan typespan{{type.id}}" ng-click="select_type(type.id)">
                                    {{type.name}}
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /well -->
        </div>
    </div>
    </div>
    <!-- 模块布局end -->
    <!-- Modal -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">添加设备</h4>
                </div>
                <div class="modal-body">
                    <form id="smart-form-register" class="smart-form" data-smart-registration-form ng-submit="insertdata()">
                        <fieldset class="row" style="padding-top: 5px;">
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">客户名称</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="insert.clientname">
                                    <span style="color: red; position: absolute; top: 0; right: -10px">*</span>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">设备类型</label>
                                <label class="select">
                                    <select ng-model="insert.type" class="form-control">
                                        <option value="{{ty.id}}" ng-repeat = "ty in types">{{ty.name}}</option>
                                    </select>
                                    <span style="color: red; position: absolute; top: 0; right: -10px">*</span>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">设备名称</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="insert.devicename">
                                    <span style="color: red; position: absolute; top: 0; right: -10px">*</span>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">设备号</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="insert.deviceid">
                                    <span style="color: red; position: absolute; top: 0; right: -10px">*</span>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">绑定项目名称</label>
                                <label class="select">
                                    <select ng-model="insert.projectid" class="form-control">
                                        <option value="0">无</option>
                                        <option value="{{project.id}}" ng-repeat = "project in projects">{{project.name}}</option>
                                    </select>
                                    <span style="color: red; position: absolute; top: 0; right: -10px">*</span>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">端口号</label>
                                <label class="input">
                                    <select ng-model="insert.port" class="form-control">
                                        <option value="{{port_obj.port}}" ng-repeat = "port_obj in ports">{{port_obj.port}}</option>
                                    </select>
                                    <span style="color: red; position: absolute; top: 0; right: -10px">*</span>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">所属区域</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="insert.zone">
                                    <!-- <span style="color: red; position: absolute; top: 0; right: -10px">*</span> -->
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">地理位置</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="insert.pos">
                                    <!-- <span style="color: red; position: absolute; top: 0; right: -10px">*</span> -->
                                </label>
                            </section>


                        </fieldset>

                        <footer>

                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                关闭
                            </button>
                            <button type="submit" class="btn btn-primary">
                                提交
                            </button>

                        </footer>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">编辑设备</h4>
                </div>
                <div class="modal-body">

                    <form id="smart-form-register" class="smart-form" data-smart-registration-form ng-submit="updatedata()">
                        <fieldset class="row" style="padding-top: 5px;">
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">客户名称</label>
                                <label class="input">
                                    <input type="text" ng-model="editdata.clientname">
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">设备类型</label>
                                <label class="select">
                                    <select ng-model="editdata.type" class="form-control">
                                        <option value="{{ty.id}}" ng-repeat = "ty in types">{{ty.name}}</option>
                                    </select>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">设备名称</label>
                                <label class="input">
                                    <input type="text" ng-model="editdata.devicename">
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">设备号</label>
                                <label class="input">
                                    <input type="text" ng-model="editdata.deviceid" disabled="disabled">
                                </label>
                            </section>

                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">绑定项目名称</label>
                                <label class="select">
                                    <select ng-model="editdata.projectid" class="form-control">
                                        <option value="0">无</option>
                                        <option value="{{project.id}}" ng-repeat = "project in projects">{{project.name}}</option>
                                    </select>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">端口号</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="editdata.port" disabled>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">所属区域</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="editdata.zone">
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">地理位置</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="editdata.pos">
                                </label>
                            </section>


                        </fieldset>

                        <footer>
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                关闭
                            </button>
                            <button type="submit" class="btn btn-primary">
                                提交
                            </button>

                        </footer>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="modal fade" id="setDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">参数设置</h4>
                </div>
                <div class="modal-body">
                    <form class="smart-form">
                        <span>{{alert_info}}</span>
                        <fieldset class="row" style="padding-top: 5px;">
                            <section class="col-sm-5" style="margin: 0 20px 15px;" ng-repeat="par in pars">
                                <label class="checkbox-inline">
                                    <input type="checkbox" ng-model="$parent.parametercheck[par.key1]">
                                    {{par.value1}}
                                </label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="$parent.parameters[par.key1]">
                                </label>
                            </section>
                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" ng-click="setParameters()">
                        发送
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- 控制参数 -->
    <div class="modal fade" id="conDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">控制参数</h4>
                </div>
                <div class="modal-body">
                    <form class="smart-form">
                        <span>{{alert_info}}</span>
                        <fieldset class="row" style="padding-top: 5px;">
                            <section class="col-sm-5" style="margin: 0 20px 15px;" ng-repeat="par1 in con_pars">   
                            <button class="btn btn-default btn-sm" ng-click="control_device(par1.key1)">
                                {{par1.value1}}
                            </button>
<!--                                 <label class="input">
                                    <input type="text" maxlength="50" ng-model="$parent.control_para[par1.key1]">
                                </label> -->
                            </section>
                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <!-- <button type="button" class="btn btn-primary" ng-click="conParameters()">
                        确定
                    </button> -->
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="modal fade" id="queryDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title">信息</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th style="width:50%">名字</th>
                            <th style="width:50%">数据</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="real in reals">
                            <td>{{real.value1}}</td>
                            <td><span class="badge">{{$parent.realdata[real.key1]}}</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" ng-click="querydevice()">
                        下发查询
                    </button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    <div class="modal fade" id="showDelDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title">信息</h4>
                </div>
                <div class="modal-body">
                    <p>
                        您确实要删除这个设备吗？
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" ng-click="deldevice()">
                        删除
                    </button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
